<template>
  <div>
    <el-backtop :right="100" :bottom="200" :visibility-height="10" />
    <!-- 搜索 -->
    <el-space wrap style="margin-bottom:10px">
      <el-select v-model="status" placeholder="请选择用户状态" clearable>
        <el-option
          v-for="item in ostatus"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select v-model="level" placeholder="请选择用户会员等级" clearable>
        <el-option
          v-for="item in olevel"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-select v-model="gender" placeholder="请选择用户性别" clearable>
        <el-option
          v-for="item in ogender"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input v-model="id" placeholder="请输入用户ID" clearable style="width:200px" />
      <el-input v-model="nickname" placeholder="请输入昵称" clearable style="width:200px" />
      <el-button type="primary" :icon="Search" @click="listData">查找</el-button>
    </el-space>
    <!-- 列表 -->
    <el-table :data="tableData" border>
      <el-table-column prop="id" label="用户ID" align="center" />
      <el-table-column prop="nickname" label="昵称" align="center" />
      <el-table-column prop="phone" label="手机号码" align="center" />
      <el-table-column prop="gender" label="性别" align="center">
        <template #default="scope">
          <el-tag v-if="scope.row.gender">{{scope.row.gender==2?'男':'女'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="level" label="会员等级" align="center">
        <template #default="scope">
          <el-tag>{{scope.row.level==1?'VIP会员':'普通会员'}}</el-tag>
          <!-- {{scope.row.level}} -->
        </template>
      </el-table-column>
      <el-table-column prop="birthday" label="生日" align="center">
        <template #default="scope">{{scope.row.birthday?timeformat(scope.row.birthday):'无'}}</template>
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
        <template #default="scope">
          <el-tag>{{scope.row.status?'激活':'冻结'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="gmtLastLogin" label="上次登录时间" align="center">
        <template
          #default="scope"
        >{{scope.row.gmtLastLogin?timeformatD(scope.row.gmtLastLogin):'无'}}</template>
      </el-table-column>
      <el-table-column prop="lastLoginIp" label="上次登录IP" align="center">
        <template #default="scope">{{scope.row.lastLoginIp}}</template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="180">
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            @click="handleStatus(scope.row)"
          >{{scope.row.status?'冻结':'激活'}}</el-button>
          <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改弹框 -->
    <el-dialog v-model="dialogFormVisible" title="编辑">
      <el-form :model="form" ref="ruleFormRef" :rules="rules" label-width="100px">
        <el-form-item label="隐藏的用户ID">
          <el-input v-model="form.id" autocomplete="off" />
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickname">
          <el-input v-model="form.nickname" autocomplete="off" />
        </el-form-item>
        <el-form-item label="用户手机号" prop="phone">
          <el-input v-model="form.phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="用户密码" prop="password">
          <el-input v-model="form.password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="用户性别" prop="gender">
          <el-select v-model="form.gender" placeholder="请选择用户性别" clearable>
            <el-option
              v-for="item in ogender"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="用户等级" prop="level">
          <el-select v-model="form.level" placeholder="请选择用户性别" clearable>
            <el-option
              v-for="item in olevel"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="用户状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择用户性别" clearable>
            <el-option
              v-for="item in ostatus"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible=false">取消</el-button>
          <el-button type="primary" @click="fangdou">修改</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 分页 -->
    <dome v-bind="domes" @limits="limits" @pages="pages" />
  </div>
</template>
<script>
import {post} from "@/util/http";
import dome from "@/components/DomeAndTop.vue";
import { Search } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import timeformat from "../../../timeformat/format";
import timeformatD from "../../../timeformat/formatD";
import { debounce } from "@/fangdou/fangdou";//防抖
export default {
  components: {
    dome,
  },
  data() {
    return {
      Search,
      status: "", //搜索
      level: "", //搜索
      gender: "", //搜索
      id: "", //搜索
      nickname: "", //搜索
      tableData: [], //列表
      dialogFormVisible: false, //布尔值
      // 分页
      domes: {
        limit: 10,
        page: 1,
        total: 10,
      },
      form: {
        status: "", //用户状态
        level: "", //用户等级
        gender: "", //用户性别
        id: "", //用户id
        nickname: "", //用户昵称
        phone: "", //用户手机号
        password: "", //用户密码
      },
      //   用户状态
      ostatus: [
        {
          value: 0,
          label: "冻结",
        },
        {
          value: 1,
          label: "激活",
        },
        {
          // value: ,
          label: "全部",
        },
      ],
      //   用户等级
      olevel: [
        {
          value: 0,
          label: "普通会员",
        },
        {
          value: 1,
          label: "VIP会员",
        },
        {
          // value: ,
          label: "全部",
        },
      ],
      //  用户性别
      ogender: [
        {
          value: 2,
          label: "男",
        },
        {
          value: 1,
          label: "女",
        },
        {
          // value: ,
          label: "全部",
        },
      ],
      rules: {
        nickname: [
          {
            required: true,
            message: "请输入用户昵称",
            trigger: "blur",
          },
        ],
        phone: [
          {
            required: true,
            message: "请输入用户手机号",
            trigger: "blur",
          },
          {
            required: true,
            min: "11",
            max: "11",
            message: "请输入手机号应该是11位",
            trigger: "blur",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入用户密码",
            trigger: "blur",
          },
        ],
        gender: [
          {
            required: true,
            message: "请选择用户性别",
            trigger: "blur",
          },
        ],
        level: [
          {
            required: true,
            message: "请选择用户等级·",
            trigger: "blur",
          },
        ],
        status: [
          {
            required: true,
            message: "请选择用户状态",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.listData();
  },
  methods: {
    timeformat, //时间格式转换
    timeformatD,
    // 弹框提交
    subMit() {
      this.$refs.ruleFormRef.validate((ref) => {
        if (ref) {
          let data = {
            _gp: "admin.user",
            _mt: "edit",
            user: JSON.stringify(this.form),
          };
            post(data)
            .then((res) => {
              if (200 == res.data.errno) {
                this.dialogFormVisible = false;
                this.listData();
                ElMessage.success("修改成功");
              } else {
                ElMessage.warning(res.data.errmsg);
              }
            })
            .catch((err) => {
              ElMessage.error(err.data.errmsg);
            });
        } else {
          ElMessage.error("带星号的必填信息不能为空!");
        }
      });
    },
    fangdou: debounce(function () {
      this.subMit();
    }),
    // 编辑
    handleEdit(e) {
      console.log(e, "编辑");
      this.dialogFormVisible = true;
      this.form = {
        status: e.status, //用户状态
        level: e.level, //用户等级
        gender: e.gender, //用户性别
        id: e.id, //用户id
        nickname: e.nickname, //用户昵称
        phone: e.phone, //用户手机号
        password: e.password, //用户密码
      };
    },
    // 状态改变
    handleStatus(e) {
      //   e.status = !e.status;
      if (e.status == 1) {//判断当前的status如果为1就改为0，改为冻结状态
        e.status = 0;
        ElMessage.success("冻结成功");
        this.Statu(e);              //激活冻结请求事件----刷新
      } else if (e.status == 0) {//判断当前的status如果为0就改为1，改为激活状态
        e.status = 1;
        ElMessage.success("激活成功");
        this.Statu(e);
      }
    },
    Statu(e) {
      console.log(e, "自主学习");
      let data = {
        _gp: "admin.user",
        _mt: "editStatus",
        userId: e.id,
        status: e.status,
      };
       post(data)
        .then((res) => {
          if (200 == res.data.errno) {
            // ElMessage.success("状态修改成功");
          } else {
            ElMessage.warning(res.data.errmsg);
          }
        })
        .catch((err) => {
          ElMessage.error(err.data.errmsg);
        });
    },
    listData() {
      let data = {
        _gp: "admin.user",
        _mt: "list",
        id: this.id,
        nickname: this.nickname,
        level: this.level,
        gender: this.gender,
        status: this.status,
        pageNo: this.domes.page, //当前页码
        limit: this.domes.limit, //页码长度
      };
      post(data)
        .then((res) => {
          if (200 == res.data.errno) {
            this.tableData = res.data.data.items;
            this.domes.total = res.data.data.total;
          } else {
            ElMessage.warning(res.data.errmsg);
          }
        })
        .catch((err) => {
          ElMessage.error(err.data.errmsg);
        });
    },
    limits(e) {
      this.domes.limit = e;
      this.listData();
    },
    pages(e) {
      this.domes.page = e;
      this.listData();
    },
  },
};
</script>
<style lang="less" scoped>
.el-form-item .el-input {
  width: 400px;
}
</style>